import {
  Button,
  Divider,
  Input,
  message,
  Popconfirm,
  Space,
  Spin,
  Table,
} from "antd";
import React, { useEffect, useState } from "react";
import {
  getAllUserInfo,
  getUserInfoByName,
  setUserManager,
  deleteUser,
} from "../../../../service/useredit";

const { Search } = Input;

function SearchUser(props) {
  //定义状态
  const [dataSource, setDataSource] = useState([
    {
      userName: "default",
      userPwd: "123456t",
      userRole: "管理员",
    },
  ]);
  const [spinState, setSpinState] = useState(true);
  //生命周期挂起初始化
  useEffect(() => {
    getAllUserInfo()
      .then((res) => {
        setSpinState(false);
        if (res.status === "200" && res.result.length !== 0) {
          setDataSource(res.result);
        } else if (res.result.length === 0) {
          message.info("用户列表为空");
        } else {
          message.info("查询用户出错");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  //设置表格
  const columns = [
    {
      title: "序号",
      key: "id",
      width: 80,
      align: "center",
      render: (txt, record, index) => index + 1,
    },
    {
      title: "用户名",
      dataIndex: "userName",
      width: "10%",
      align: "center",
    },
    {
      title: "密码",
      dataIndex: "userPwd",
      width: "15%",
      align: "center",
    },
    {
      title: "用户角色",
      dataIndex: "userRole",
      width: "10%",
      align: "center",
      render: (txt, record, index) => {
        return txt === 0 ? (txt = "管理员") : (txt = "用户");
      },
    },
    {
      title:"电话",
      dataIndex: "phone",
      width:"15%",
      align:"center",
    },
    {
      title:"邮箱",
      dataIndex: "email",
      width:"15%",
      align:"center",
    },
    {
      title: "操作",
      align: "center",
      render: (txt, record, index) => {
        return (
          <Space align="center" size="middle">
            <Button
              type="primary"
              size="small"
              onClick={() => {
                editUser(record);
              }}
            >
              编辑
            </Button>
            {parseInt(record.userRole) ? (
              <Popconfirm
                title="确定设为管理员？"
                onCancel={() => {
                  console.log("取消设为管理员");
                }}
                onConfirm={() => {
                  setManager(record.userName);
                }}
              >
                <Button type="primary" size="small">
                  设为管理员
                </Button>
              </Popconfirm>
            ) : (
              <></>
            )}

            <Popconfirm
              title="确定删除该用户？"
              onCancel={() => {
                console.log("取消删除");
              }}
              onConfirm={() => {
                onDeleteUser(record.userName);
              }}
            >
              <Button type="primary" size="small" danger={true}>
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  //搜索用户
  const onSearch = (value) => {
    if( value === "" ){
      message.info("搜索内容不能为空")
      return false
    }
    setSpinState(true);
    getUserInfoByName(value)
      .then((res) => {
        setSpinState(false);
        if (res.status === "200" && res.result.length !== 0) {
          setDataSource(res.result);
        } else if (res.result.length === 0) {
          message.info("用户列表为空");
        } else {
          message.info("查询用户出错");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  //编辑用户
  const editUser = (values) => {
    props.history.push(`/admin/manager/useredit/edituser?${values.userName}`)
  };
  //设为管理员
  const setManager = (userName) => {
    setUserManager(userName)
      .then((res) => {
        console.log(res);
        if (res.status === "200") {
          message.info(res.msg);
        } else {
          message.info("设置失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //删除用户
  const onDeleteUser = (userName) => {
    deleteUser({
      userName: userName,
    })
      .then((res) => {
        console.log(res);
        if (res.status === "200") {
          message.info(res.msg);
        } else {
          message.info("删除失败");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div className="searchUserBox">
      <Search
        placeholder="请输入搜索用户"
        onSearch={onSearch}
        enterButton
        style={{ width: "30%" }}
      />
      <Divider />
      <Spin spinning={spinState}>
        <Table
          columns={columns}
          dataSource={dataSource}
          rowKey="userName"
          bordered
          pagination={{ total: dataSource.length, pageSize: 10 }}
        />
      </Spin>
    </div>
  );
}

export default SearchUser;
